<template>
    <div class="app-container">
        <el-row class="row">
            <el-col :span="12">
                <div class="grid-content bg-purple-dark">
                    <el-button v-if="tabE<=5&&tabE!=4" type="primary" icon="el-icon-delete-solid" @click="bindVideo">推荐</el-button>
                    <el-button v-if="tabE==4" type="primary" icon="el-icon-delete-solid" @click="bindVideo">取消推荐</el-button>
                    <el-button v-if="tabE!=6" type="primary" icon="el-icon-delete-solid" @click="deleteVideo">下架</el-button>
                    <el-button v-if="tabE>=6" type="primary" icon="el-icon-delete-solid" @click="deleteVideo">还原</el-button>
                    <el-button v-if="tabE==3" type="primary" icon="el-icon-delete-solid" @click="dzlVideo">绑定低质量</el-button>
                </div>
        </el-col>
        </el-row>
        <!-- 视频管理列表 -->
        <el-table
        v-loading="loading"
        :data="videoData"
        border
        style="width: 100%"
        @selection-change="handleVideoChange"
        height="380">
        <el-table-column
          fixed
          prop="date"
          width="50"
          type="selection"
          align="center">
        </el-table-column>
        <el-table-column
          fixed
          prop="videoId"
          label="视频编号"
          width="150"
          align="center">
        </el-table-column>
        <el-table-column
          prop="videoDesc"
          label="视频文案"
          width="200"
          align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.videoDesc.length > 5">
              <div class="ellipsis" v-tooltip :content="scope.row.videoDesc">
                <el-popover
                  placement="top-start"
                  width="200"
                  trigger="hover"
                  :content="scope.row.videoDesc">
                  <span slot="reference">{{ scope.row.videoDesc }}</span>
                </el-popover>
              </div>
            </div>
            <div v-else>{{ scope.row.videoDesc }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="视频封面"
          width="120"
          align="center">
          <template slot-scope="scope">
            <el-image style="width: 95px; height: 95px" @click="onImage(scope.row.coverNumber)" :src="`http://101.43.223.224:8765/image/getImageById?id=${scope.row.coverNumber}`" :preview-src-list="srcList"></el-image>
          </template>
        </el-table-column>
        <el-table-column
          label="播放视频"
          width="120"
          align="center">
          <template slot-scope="scope">
            <el-button type="primary" @click="onVideo(scope.row.videoNumber)" icon="el-icon-video-play">播放</el-button>
          </template>
        </el-table-column>
        <el-table-column
          label="视频状态"
          width="120"
          align="center">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.isDelete==1">公开</el-tag>
            <el-tag type="info" v-else>隐藏</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="videoTopic"
          label="视频话题"
          width="180"
          align="center">
          <template slot-scope="scope">
            <div v-for="(item,index) in scope.row.videoTopic.split(',')" :key="index">
              <el-tag style="margin-top:5px">{{ item }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="userId"
          label="上传者编号"
          width="120"
          align="center">
        </el-table-column>
        <el-table-column
          prop="userAccount"
          label="上传账号"
          width="120"
          align="center">
        </el-table-column>
        <el-table-column
          prop="creationTime"
          label="上传时间"
          width="160"
          align="center">
        </el-table-column>
        <el-table-column
          prop="videoWidth"
          label="视频宽度(rpx)"
          width="120"
          align="center">
        </el-table-column>
        <el-table-column
          prop="videoHeight"
          label="视频高度(rpx)"
          width="120"
          align="center">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="120"
          align="center">
          <template slot-scope="scope">
            <el-button v-if="tabE<6" @click="videoDetails(scope.row)" type="text" size="small">详情</el-button>
            <el-button v-if="tabE<6" type="text" @click="videoUpdate(scope.row)" size="small">编辑</el-button>
            <el-button v-if="tabE==0" type="text" @click="bindVideo(scope.row)" size="small">推荐</el-button>
            <el-button v-if="tabE<=7&&tabE!=6" type="text" @click="deleteVideo(scope.row)" size="small">下架</el-button>
            <el-button v-if="tabE==1" type="text" @click="bindVideo(scope.row)" size="small">取消推荐</el-button>
            <el-button v-if="tabE>=6" @click="deleteVideo(scope.row)" type="text" size="small">还原</el-button>

          </template>
        </el-table-column>
      </el-table>
      <!---分页-->
        <el-pagination
            @current-change="handleVideoCurrentChange"
            @size-change="handleVideoSizeChange"
            :current-page="videoParams.pageNum"
            :page-sizes="[3, 5, 10, 20]"
            :page-size="videoParams.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            background
        :total="videoParams.total"
            class="page">
        </el-pagination>
    
        <div class="videoDiv" v-if="dialogVideoVisible==true">
          <a @click="CloseV" class="vIcon el-icon-circle-close"></a>
          <video-player class="videoPlayer vjs-custom-skin" ref="videoPlayer" :options="Options">
          </video-player>
        </div>
    
        <el-drawer
          title="视频详情"
          :visible.sync="DetailsVisible"
          direction="rtl"
          size="50%"
          :before-close="handleClose">
          <el-table :data="detailsData">
            <el-table-column property="videoId" align="center" label="视频编号" width="130"></el-table-column>
            <el-table-column property="vid" align="center" label="视频ID" width="90"></el-table-column>
            <el-table-column property="userId" align="center" label="发布者ID" width="90"></el-table-column>
            <el-table-column property="userAccount" align="center" label="发布者昵称" width="90"></el-table-column>
            <el-table-column property="likeCounts" align="center" label="点赞数" width="90"></el-table-column>
            <el-table-column property="collectCounts" align="center" label="收藏数" width="90"></el-table-column>
            <el-table-column property="commentCounts" align="center" label="评论数" width="90"></el-table-column>
            <el-table-column property="videoViews" align="center" label="浏览量" width="90"></el-table-column>
            <el-table-column property="shareVolume" align="center" label="分享量" width="90"></el-table-column>
            <el-table-column property="download" align="center" label="下载量" width="90"></el-table-column>
          </el-table>
          <!---分页-->
          <el-pagination
            @current-change="handleDetailsCurrentChange"
            @size-change="handleDetailsSizeChange"
            :current-page="detailsParams.pageNum"
            :page-sizes="[3, 5, 10, 20]"
            :page-size="detailsParams.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            background
            :total="detailsParams.total"
            class="page2">
          </el-pagination>
        </el-drawer>
    </div>
    </template>
    
    <script>
    import {listDataF,listDataT,listDataD,listDataX,listDataS,dzlData} from '@/api/video/userVideo';
    import {delData,bindData,listDataById,addData,updateData,delVideoById,deleteVideoCoverById} from '@/api/video/video';
    import {topicqueryAll} from "@/api/topic/topic";
    import { Tooltip } from 'element-ui';
    export default {
      directives: {
        tooltip: Tooltip
      },
        props: ['vdData','totalS','tabE','refreshFlag'],
        data() {
          return {
            //视频列表容器
            videoData:[],
            //视频话题容器
            topicData:[],
             // 遮罩层
            loading: true,
            //查询参数集合
            videoParams:{
                pageNum:1,
                pageSize:3,
                total:0,
            },
            //videoData多选框选中的值
            videoIds:[],
            //新增/编辑弹窗遮罩层
            dialogVideoFormVisible:false,
            //视频封面弹出框遮罩层
            dialogCoverVisible:false,
            //视频弹出框遮罩层
            dialogVideoVisible:false,
            //新增视频form标题盒子宽度
            formLabelWidth: '140px',
            //新增/编辑弹窗标题
            titleDra:'',
            videoFormRules: {
              userAccount: [
                { required: true, message: '请选择发布账号', trigger: 'blur' }
              ],
              videoStatus: [
                { required: true, message: '请选择视频状态', trigger: 'blur' }
              ],
            },
            
            //视频详情列表
            detailsData:[],
    
            //视频详情列表分页参数集合
            detailsParams:{
              pageNum:1,
              pageSize:3,
              total:0,
            },
    
            //详情列表遮罩层
            DetailsVisible:false,
    
            //视频封面地址
            imageUrl: '',
    
            //视频封面回显Id
            imgId:'',
    
            //视频标签列表
            options: [],

            //视频封面放大
            srcList:[],
            
            //视频回显id
            videoShowId:'',
    
            //视频配置
            playerOptions: {
              // 视频 url
              sources: [{
                
              }],
              // 其他设置项
              controls: true,
              preload: "auto",
              aspectRatio: "16:9",
              fluid: true,
              // poster: 'http://101.43.223.224:8765/image/getImageById?id='+6613,
              notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息
            },
    
            //视频配置
            playerO: {
              // 视频 url
              sources: [{
                
              }],
              // 其他设置项
              controls: true,
              preload: "auto",
              aspectRatio: "16:9",
              fluid: true,
              // poster: 'http://101.43.223.224:8765/image/getImageById?id='+6613,
              notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息
            },
          }
        },
        created(){
          //渲染视频列表
          this.getPublishVideo();
          //视频话题回显
          this.topicSelect();
          //视频封面放大
          this.onImage()
        },
        methods:{
          //上传视频列表分页操作
          handleVideoSizeChange(pageSize) {
            this.videoParams.pageSize = pageSize
            this.getPublishVideo()
          },
          handleVideoCurrentChange(pageNum) {
            this.videoParams.pageNum = pageNum
            this.getPublishVideo()
          },
    
           //视频详情列表分页操作
           handleDetailsSizeChange(pageSize) {
            this.detailsParams.pageSize = pageSize
          },
          handleDetailsCurrentChange(pageNum) {
            this.detailsParams.pageNum = pageNum
          },
    
          //查询运营视频
          getPublishVideo(){
            this.loading = true;
            if(this.tabE==3){
              listDataF(this.videoParams).then(res =>{
                this.videoData = []
                this.videoData = res.data.data.content;
                this.videoParams.total = res.data.data.totalSize;
                this.loading = false;
                
              })
            }else if(this.tabE==4){
              listDataT(this.videoParams).then(res =>{
                this.videoData = []
                this.videoData = res.data.data.content;
                this.videoParams.total = res.data.data.totalSize;
                this.loading = false;
              })
            }else if(this.tabE==5){
              listDataD(this.videoParams).then(res =>{
                this.videoData = []
                this.videoData = res.data.data.content;
                this.videoParams.total = res.data.data.totalSize;
                this.loading = false;
              })
            }else if(this.tabE==6){
                listDataX(this.videoParams).then(res =>{
                this.videoData = []
                this.videoData = res.data.data.content;
                this.videoParams.total = res.data.data.totalSize;
                this.loading = false;
              })
            }else{
                listDataS(this.videoParams).then(res =>{
                this.videoData = []
                this.videoData = res.data.data.content;
                this.videoParams.total = res.data.data.totalSize;
                this.loading = false;
              })
            }
            
          },
    
          //图片放大
          onImage(coverNumber){
            this.srcList.push("http://101.43.223.224:8765/image/getImageById?id="+coverNumber)
          },
    
          //播放按钮
          onVideo(videoNumber){
            this.dialogVideoVisible=true;
            this.videoShowId = videoNumber;
          },
    
          //视频弹出框关闭后操作
          CloseV(){
            this.dialogVideoVisible=false;
          },
    
          // 上传视频列表多选框
          handleVideoChange(val){
            this.videoIds = val.map(v=>v.vid)
          },
    
          //删除视频
          deleteVideo(row){
            if(this.videoIds.length==0 && !row.vid){
                this.$message({
                message: '请先勾选需要操作数据',
                type: 'warning'
                });
            }else{
                let vids = [row.vid]
                let videoIds =[]
                if(this.videoIds.length>0){
                videoIds = this.videoIds
                }else{
                videoIds = vids
                }
                this.$modal.confirm('是否操作选中的这' + videoIds.length + '条数据项？').then(function() {
                return delData(videoIds);
                }).then(res =>{
                if(res.flag==true){
                this.getPublishVideo()
                this.$modal.msgSuccess("删除成功");
                }else{
                this.$modal.msgError("删除失败")
                }
                })
            }
          },

          //绑定低质量视频
          dzlVideo(){
            if(this.videoIds.length==0){
                this.$message({
                message: '请先勾选需要操作数据',
                type: 'warning'
                });
            }else{
                let videoIds =[]
                videoIds = this.videoIds
                this.$modal.confirm('是否操作选中的这' + videoIds.length + '条数据项？').then(function() {
                return dzlData(videoIds);
                }).then(res =>{
                if(res.flag==true){
                this.getPublishVideo()
                this.$modal.msgSuccess("绑定成功");
                }else{
                this.$modal.msgError("绑定失败")
                }
                })
            }
          },
    
          //绑定视频池（推荐、取消推荐
          bindVideo(row){
            if(this.videoIds.length==0 && !row.vid){
                this.$message({
                message: '请先勾选需要操作数据',
                type: 'warning'
                });
            }else{
                let vids = [row.vid]
                let videoIds =[]
                if(this.videoIds.length>0){
                videoIds = this.videoIds
                }else{
                videoIds = vids
                }
                this.$modal.confirm('是否确认操作选中的这' + videoIds.length + '条视频？').then(function() {
                return bindData(videoIds);
                }).then(res =>{
                if(res.flag==true){
                this.getPublishVideo()
                this.$modal.msgSuccess("操作成功");
                }else{
                this.$modal.msgError("操作失败")
                }
                })
            }
          },
    
          // 查询视频详情
          videoDetails(row){
            this.DetailsVisible = true;
            const vid = row.vid
            listDataById(vid).then(res =>{
              this.detailsData = res.data.data.content;
              this.detailsParams.total = res.data.data.totalSize;
            })
          },

        },
        
        computed: {
          //播放视频路径
          Options() {
            if (this.videoShowId) {
              if(this.playerO.sources.length>0){
                this.playerO.sources.splice(0, 1);
              }
              this.playerO.sources.push({
                src: 'http://101.43.223.224:8765/image/getVideoById?id='+this.videoShowId,
                type: 'video/mp4',
              });
              return this.playerO;
            } else {
              return {}
            }
          },
      },
    
      watch:{
        // 模糊查数据条数
        totalS(newVal) {
          this.videoParams.total = newVal; // 监听totalS的变化，将新值赋给totalSize
        },
        vdData(newVal){
          this.videoData = newVal;
        },
        refreshFlag: function(newVal, oldVal) {
            if (newVal) {
                // 调用重新加载表格数据的方法
                this.getPublishVideo();
            }
        }
      }
    }
    </script>
    
    <style lang="less" scoped>

    .row{
        margin-bottom: 10px;
      }
    .page{
        margin-top: 15px;
        margin-left: 360px;
    }
    .page2{
      position: absolute;
          bottom: 50px;
          left: 160px;
    }
    
    .videoDiv{
      width:500px;
      height:280px;
      position: fixed;
      bottom: 320px;
      right: 430px;
    }
    
    .vIcon{
      font-size: 22px;
      color:rgba(249, 249, 249, 0.801);
      float: right;
      position: relative;;
      top: 5px;
      right: 5px;
      z-index: 1;
    }

    .ellipsis {
      width: 160px; /* 根据实际情况调整宽度 */
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin:0 auto;
    }
    
    .avatar-uploader {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      width: 178px;
      height: 240px;
      display: inline-block;
      z-index: 1;
    }
    .avatar-uploader:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 240px;
      line-height: 240px;
      text-align: center;
    }
    .avatar {
      width: 178px;
      height: 240px;
      display: inline-block;
    }
    .item-button{
      width:200px;
      float: right;
      margin-right:100px;
      margin-top:10px;
    }
    .item{
      float: left;
      width:420px;
    }
    .itemZ{
      width:420px;
    }
    .item2{
      float: left;
      width:420px;
    }
    
    .item3{
      width:420px;
    }
    .yshz{
      width: 1100px;
      height:600px;
      margin-top:40px;
      margin-left:160px;
    }
    .itemFm{
      width: 1100px;
      height:600px;
    }
    .video-player1 {
      width:400px;
      margin-right:100px;
    }
    </style>